<template>
  <div class="container">
    <div class="compatibleBox">
      <el-card shadow="hover" class="box-card">
        <div slot="header" class="clearfix">
          <h3>基本情况预览</h3>
        </div>
        <div class="compatiblePreview">
          <!-- <Echarts
            id="compatible"
            width="400px"
            height="250px"
            :options="option"
            :key="echartKey"
          />   -->
          <div class="compatiblePreviewRight">
            <div class="compatiblePreviewRightText">
              <p style="font-size: 20px">
                表总行数:
                <s..pan
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.allTableRows || 0 }}条</s..pan
                >
              </p>
            </div>
            <div class="compatiblePreviewRightText">
              <p style="font-size: 20px">
                视图总数:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.numberViews }}个</span
                >
              </p>
            </div>
            <div class="compatiblePreviewRightText">
              <p style="font-size: 20px">
                对象数量:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.objectSize }}个</span
                >
              </p>
            </div>
            <div class="compatiblePreviewRightText">
              <p style="font-size: 20px">
                数据大小:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.dataSize.toFixed(3) }}MB</span
                >
              </p>
            </div>
            <div
              class="compatiblePreviewRightText"
              v-if="taskResult.numberTriggers"
            >
              <p style="font-size: 20px">
                触发器数量:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.numberTriggers }}个</span
                >
              </p>
            </div>
            <div
              class="compatiblePreviewRightText"
              v-if="taskResult.numberProcedures"
            >
              <p style="font-size: 20px">
                存储过程数量:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.numberProcedures }}个</span
                >
              </p>
            </div>
            <div
              class="compatiblePreviewRightText"
              v-if="taskResult.numberSequences"
            >
              <p style="font-size: 20px">
                序列数量:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.numberSequences }}个</span
                >
              </p>
            </div>
            <div
              class="compatiblePreviewRightText"
              v-if="taskResult.numberSynonyms"
            >
              <p style="font-size: 20px">
                同义词数量:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.numberSynonyms }}个</span
                >
              </p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Echarts from "./echarts.vue";

export default {
  props: ["datas"],
  components: { Echarts },
  name: "WholeInfo",
  data() {
    return {
      option: {
        title: {
          text: "兼容率",
          subtext: "100%",
          left: "center",
          top: "38%",
          textStyle: {
            fontSize: 14,
            algin: "center",
            color: "#777",
          },
          subtextStyle: {
            fontFamily: "微软雅黑",
            fontSize: "24px",
          },
        },
        tooltip: {
          trigger: "item",
          top: "center",
          left: "center",
        },
        legend: {
          orient: "vertical",
          top: "0%",
          left: "right",
        },
        series: [
          {
            name: "兼容性",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: "兼容", itemStyle: { color: "#91CC75" } },
              { value: 0, name: "不兼容", itemStyle: { color: "#FF7070" } },
            ],
          },
        ],
      },
      activeIndex: "1",
      data: null,
      taskResult: {},
      echartKey: null,
    };
  },
  mounted() {
    this.taskResult = JSON.parse(this.$props.datas.taskResult).data.wholeResult;
    const percent =
      JSON.parse(this.$props.datas.taskResult).data.wholeResult
        .compatiblePercent * 100;
    this.option.title.subtext = percent + "%";
    this.option.series[0].data[0].value = percent;
    this.option.series[0].data[1].value = 100 - percent;
    this.echartKey = Math.random();
  },
  methods: {
    gainEchartsData() {
      let max = 0;
      let xEl = [
        { label: "表评估结果", value: "tableResult" },
        { label: "视图评估结果", value: "viewResult" },
        { label: "触发器评估结果", value: "triggerResult" },
        { label: "存储过程评估结果", value: "procedureResult" },
        { label: "索引评估结果", value: "indexResult" },
        { label: "序列评估结果", value: "seqResult" },
        { label: "同义词评估结果", value: "synonymResult" },
        { label: "函数评估结果", value: "functionResult" },
        { label: "类型评估结果", value: "typeResult" },
      ];
      xEl.forEach((f) => {
        if (!this.taskResult[f.value]) return;
        if (this.taskResult[f.value].allSize > max) {
          max = this.taskResult[f.value].allSize || 0;
        }
        if (this.taskResult[f.value]) {
          this.option.xAxis[0].data.push(f.label);
          this.option.series[0].data.push(
            this.taskResult[f.value].compatiblePercent.split("%")[0]
          );
          this.option.series[1].data.push(this.taskResult[f.value].allSize);
        }
      });
      if (String(max).length == 1) {
        this.option.yAxis[1].max = 10;
        return;
      }
      let integerBit = String(max)[0];
      integerBit =
        (Number(integerBit) + 1) * Math.pow(10, String(max).length - 1);
      this.option.yAxis[1].max = integerBit;
      this.option.yAxis[1].interval = Math.floor(integerBit / 5);
    },
    handleSelect(key, keyPath) {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;

  h3 {
    margin: 5px 0;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 16px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .desc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .box-card {
      width: 25%;
      margin: 20px;
      height: 200px;

      p {
        font-size: 14px;
      }
    }
  }
  .compatibleBox {
    width: 100%;

    .compatiblePreview {
      display: flex;
      .compatiblePreviewRight {
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 30px 0 40px;
        margin-left: 5%;

        .compatiblePreviewRightText {
          width: 50%;
          margin-top: 10px;

          p::before {
            content: "•";
            color: #777;
            display: inline-block;
            font-size: 100%;
            margin-left: -10px;
            padding-right: 10px;
          }
          p {
            font-weight: 600;
            font-size: 28px;
            color: rgba(0, 0, 0, 0.6);
          }

          span {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
            margin: 7px 0;
            display: block;
          }
        }
      }
    }
  }
}
</style>
